<template>
  <section class="example-code">
    <h4>范例: {{item.remark}}</h4>
    <div :class="{'codeview-wrap': item.view}">
      <div v-if="item.view" class="codeview-gut">
        <CodeView :item="item"></CodeView>
      </div>
      <!-- <div class="view-code" @click="toggle">查看源码</div> -->
      <w-toggle v-if="item.view" class="code-toggle" :expanded="!!item.expanded" expandedIcon=".f-i .f-i-minus-square" collapsedIcon=".f-i .f-i-plus-square" align="center" height=40>查看源码</w-toggle>
      <div class="codeview-pre">
        <div v-if="Array.isArray(item.code)" v-for="tmp in item.code" class="codeview-tmpl">
          <div class="codeview-tmpl-title">{{tmp.src}}</div>
          <pre :class="['brush:' + (item.type || 'js') + ';toolbar:false']" v-html="preHtml(tmp.code)"></pre>
        </div>
        <pre v-else :class="['brush:' + (item.type || 'js') + ';toolbar:false']" v-html="preHtml(item.code)"></pre>
      </div>
    </div>
  </section>
</template>

<script>
  import CodeView from './CodeView.vue'
  
  export default {
    components: {
      CodeView
    },
    props: {
      item: Object,
      expanded: Boolean,
    },
    methods: {
      preHtml(code) {
        let s = code.match(/^\s+/)
        return s ? code.replace(RegExp(s[0], 'g'), '\n') : code
      },
    }
  }
</script>

<style>
  .example-code {
    margin-bottom: 30px;
  }
</style>